<template>
    <div class="content" v-loading="load">
        <el-form>
            <el-form-item class="imgBox" label="图书封面">
                <el-upload :http-request="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :show-file-list="false"
                    class="avatar-uploader" >
                    <el-icon v-if="book.bookimage == ''" style="color: gainsboro;font-size: 45px;">
                        <Plus />
                    </el-icon>
                    <img :src="book.bookimage" alt="" v-else>
                </el-upload>
            </el-form-item>
            <el-form-item label="图书名字">
                <el-input type="text" v-model="book.bookname"></el-input>
            </el-form-item>
            <el-form-item label="图书作者">
                <el-input type="text" v-model="book.author"></el-input>
            </el-form-item>
            <el-form-item label="图书ISBN">
                <el-input type="text" v-model="book.isbn"></el-input>
            </el-form-item>
            <el-form-item label="图书总数">
                <el-input type="text" v-model="book.bookcount"></el-input>
            </el-form-item>
            <el-form-item label="图书类型">
                <el-select v-model="book.booktype" placeholder="选择图书类型">
                    <el-option :value="-1" label="选择图书类型"></el-option>
                    <el-option v-for="item in typeList" :label="item.type" :value="item.typeid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="图书描述">
                <el-input type="textarea" :rows="5" resize="none" :show-word-limit="true" maxlength="100"
                    v-model="book.content"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save()">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">

import { FormRules, UploadProps, FormInstance } from 'element-plus'
import { getBase64 } from '@/utils/commonUse';
import { tip } from '@/utils/alert';
import { BookType } from '@/types/book';
import { onMounted, ref, watch } from 'vue';
import { reqAddBook, reqEditBook, reqGetTypeList } from '@/api/common';
import { TypeListType } from '@/types/book';
import Cloud from 'leancloud-storage';

const book = ref<BookType>(
    {
        author: "",
        bookcount: 10,
        bookimage: '',
        bookname: '',
        booktype: -1,
        content: '',
        isbn: ''
    }
)
const load = ref<boolean>(false)
const typeList = ref<TypeListType[]>([])
const prop = defineProps<{
    book: BookType | null
}>()
const temp=ref<BookType>({...book.value})
const emits = defineEmits(['emitChange','emitEdit'])
watch(() => prop.book, () => {
    if (prop.book) {
        book.value = { ...prop.book }
    }else{
        book.value=temp.value
    }
})


const getTypeList = async () => {
    let res = await reqGetTypeList(50, 1)
    typeList.value = res.data.data.data
}

const imgFormat = (base64: any) => {
    console.log(base64);
    let cloudFile = new Cloud.File("banner.png", { base64 });
    console.log(cloudFile);
    return cloudFile.save()
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    const imgType = ['image/jpeg', 'image/png']
    if (imgType.indexOf(rawFile.type) == -1) {
        tip('图片格式为jpg', 'warning')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        tip('图片大小应为2MB', 'warning')
        return false
    }
    return true
}

const handleAvatarSuccess = (info: { file: any; }) => {
    getBase64(info.file, (base64: any) => {
        book.value.bookimage = base64
    })
}




const save = async () => {
    load.value=true
    if (book.value.bookimage != prop.book?.bookimage) {
        let res: any = await imgFormat(book.value.bookimage)
        book.value.bookimage = res.attributes.url;
    }
    book.value.bookcountnow = book.value.bookcount
    console.log(book.value);
    if (prop.book) {
        reqEditBook(book.value).then(res => {
            load.value = false
            console.log(res);
            tip(res.data.info, "success")
            emits('emitEdit', { bool: false, info: res.data.data })
        })

    } else {
        reqAddBook(book.value).then(res => {
            load.value = false
            console.log(res);
            tip(res.data.info, "success")
            emits('emitChange', { bool: false, info: res.data.data })
        })

    }
}








onMounted(() => {
    getTypeList()
})


</script>

<style lang="scss" scoped>
.content {
    width: 50%;

    .el-button {
        width: 100%;
    }

    .imgBox {
        .avatar-uploader {
            height: 250px;
            width: 200px;
            border: 1px dashed var(--el-border-color);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 200px;
                height: 250px
            }
        }
    }
}</style>